<template>
  <div class="aside-list" :class="{ active: active }">
    <!-- truncate 是 windicss 用于控制文本显示的类,溢出的部分显示省略号 -->
    <span class="truncate"><slot /></span>
    <!-- 编辑按钮 -->
    <el-button text type="primary" size="small" class="ml-auto px-1" @click.stop="$emit('edit')">
      <el-icon :size="12"><Edit /></el-icon>
    </el-button>
    <!-- 阻止事件冒泡,防止点击删除按钮后选中当前 listItem  -->
    <span @click.stop='()=>{}'>
      <!-- 删除按钮 -->
      <el-popconfirm title="您确定要删除吗？" width="170" @confirm="$emit('delete')">
        <template #reference>
          <el-button text type="primary" size="small" class="px-1">
            <el-icon :size="12"><Close /></el-icon>
          </el-button>
        </template>
      </el-popconfirm>
    </span>
  </div>
</template>

<script setup>
import {} from 'vue'

const props = defineProps({
  active: {
    type: Boolean,
    default: false
  }
})

defineEmits(['edit', 'delete'])
</script>
<style scoped>
.aside-list {
  border-bottom: 1px solid #f4f4f4;
  cursor: pointer;
  @apply flex items-center p-3 text-sm text-gray-600;
}

.aside-list:hover,
.active {
  @apply bg-blue-50;
}
</style>
